{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "<table style=\"float:left; border:none\">\n",
    "   <tr style=\"border:none; background-color: #ffffff\">\n",
    "       <td style=\"border:none\">\n",
    "           <a href=\"http://bokeh.pydata.org/\">     \n",
    "           <img \n",
    "               src=\"assets/bokeh-transparent.png\" \n",
    "               style=\"width:50px\"\n",
    "           >\n",
    "           </a>    \n",
    "       </td>\n",
    "       <td style=\"border:none\">\n",
    "           <h1>Bokeh 教程</h1>\n",
    "       </td>\n",
    "   </tr>\n",
    "</table>\n",
    "\n",
    "<div style=\"float:right;\"><h2>05. 演示布局</h2></div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.pydata.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"0999c330-39ed-48a1-b132-1927dab2c607\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof (root._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id !== undefined) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var element_id = msg.content.text.trim();\n",
       "            Bokeh.index[element_id].model.document.clear();\n",
       "            delete Bokeh.index[element_id];\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(`.${CLASS_NAME.split(' ')[0]}`);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[0].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      var bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      var script_attrs = bk_div.children[0].attributes;\n",
       "      for (var i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[0].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      var toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[0]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"0999c330-39ed-48a1-b132-1927dab2c607\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n",
       "    }\n",
       "    finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.info(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(js_urls, callback) {\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = js_urls.length;\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var s = document.createElement('script');\n",
       "      s.src = url;\n",
       "      s.async = false;\n",
       "      s.onreadystatechange = s.onload = function() {\n",
       "        root._bokeh_is_loading--;\n",
       "        if (root._bokeh_is_loading === 0) {\n",
       "          console.log(\"Bokeh: all BokehJS libraries loaded\");\n",
       "          run_callbacks()\n",
       "        }\n",
       "      };\n",
       "      s.onerror = function() {\n",
       "        console.warn(\"failed to load library \" + url);\n",
       "      };\n",
       "      console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "    }\n",
       "  };var element = document.getElementById(\"0999c330-39ed-48a1-b132-1927dab2c607\");\n",
       "  if (element == null) {\n",
       "    console.log(\"Bokeh: ERROR: autoload.js configured with elementid '0999c330-39ed-48a1-b132-1927dab2c607' but no matching script tag was found. \")\n",
       "    return false;\n",
       "  }\n",
       "\n",
       "  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-0.12.10.min.js\"];\n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    \n",
       "    function(Bokeh) {\n",
       "      \n",
       "    },\n",
       "    function(Bokeh) {\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.css\");\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.css\");\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.css\");\n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i].call(root, root.Bokeh);\n",
       "      }if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"0999c330-39ed-48a1-b132-1927dab2c607\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(js_urls, function() {\n",
       "      console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof (root._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"0999c330-39ed-48a1-b132-1927dab2c607\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n    }\n    finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.info(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(js_urls, callback) {\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = js_urls.length;\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      var s = document.createElement('script');\n      s.src = url;\n      s.async = false;\n      s.onreadystatechange = s.onload = function() {\n        root._bokeh_is_loading--;\n        if (root._bokeh_is_loading === 0) {\n          console.log(\"Bokeh: all BokehJS libraries loaded\");\n          run_callbacks()\n        }\n      };\n      s.onerror = function() {\n        console.warn(\"failed to load library \" + url);\n      };\n      console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.getElementsByTagName(\"head\")[0].appendChild(s);\n    }\n  };var element = document.getElementById(\"0999c330-39ed-48a1-b132-1927dab2c607\");\n  if (element == null) {\n    console.log(\"Bokeh: ERROR: autoload.js configured with elementid '0999c330-39ed-48a1-b132-1927dab2c607' but no matching script tag was found. \")\n    return false;\n  }\n\n  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-0.12.10.min.js\"];\n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    \n    function(Bokeh) {\n      \n    },\n    function(Bokeh) {\n      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.css\");\n      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.css\");\n      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.css\");\n      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.css\");\n      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.css\");\n      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.css\");\n    }\n  ];\n\n  function run_inline_js() {\n    \n    if ((root.Bokeh !== undefined) || (force === true)) {\n      for (var i = 0; i < inline_js.length; i++) {\n        inline_js[i].call(root, root.Bokeh);\n      }if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      var cell = $(document.getElementById(\"0999c330-39ed-48a1-b132-1927dab2c607\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(js_urls, function() {\n      console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.io import output_notebook, show\n",
    "from bokeh.plotting import figure\n",
    "\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "在前面的章节中，我们学习了如何使用不同类型的数据创建单个图表。但我们经常想绘制不止一幅图。Bokeh 图表可以单独嵌入在HTML文件中，但把多个图表合并在一个Bokeh内置的Layout里也是很容易的。我们将在本章学习如何做到这一点。\n",
    "\n",
    "下面的单元格定义了一些我们将在示例中使用的数据变量。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "x = list(range(11))\n",
    "y0, y1, y2 = x, [10-i for i in x], [abs(i-5) for i in x]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 行与列\n",
    "`bokeh.layouts` 模块提供了 ``row`` 和 ``column`` 功能以便在垂直和水平布局中排列图表。下面的例子把三个图表排成一排。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div class=\"bk-root\">\n",
       "    <div class=\"bk-plotdiv\" id=\"db66ebcb-70f5-466c-b89a-e78d6e2b250c\"></div>\n",
       "</div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    var docs_json = {\"52f4f30b-7129-478c-85b3-2c6f4422124c\":{\"roots\":{\"references\":[{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"105f0f5a-2d1f-476e-9c83-a075f2945536\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"source\":{\"id\":\"cd53ce5f-16f5-446d-abf7-dc1d06827878\",\"type\":\"ColumnDataSource\"}},\"id\":\"dcba2daf-2e3b-4921-8cd8-c2854cd47c6b\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"a55c7fd2-a08d-4f13-b85b-64d10bf559b5\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"data_source\":{\"id\":\"cd53ce5f-16f5-446d-abf7-dc1d06827878\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"87f8fe0a-58f6-48f2-acf1-6512de6b8c5e\",\"type\":\"Square\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"b73ab85a-d3b1-4a11-babd-153265155449\",\"type\":\"Square\"},\"selection_glyph\":null,\"view\":{\"id\":\"dcba2daf-2e3b-4921-8cd8-c2854cd47c6b\",\"type\":\"CDSView\"}},\"id\":\"55205201-f415-46f9-bf60-6bee6c91d2f4\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"118ef445-e7eb-4edb-9f33-456a4ee0b0ab\",\"type\":\"WheelZoomTool\"},{\"attributes\":{},\"id\":\"bce29049-bf52-42ff-87a2-6da1cf80b563\",\"type\":\"SaveTool\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"olive\"},\"line_alpha\":{\"value\":0.5},\"line_color\":{\"value\":\"olive\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"87f8fe0a-58f6-48f2-acf1-6512de6b8c5e\",\"type\":\"Square\"},{\"attributes\":{\"data_source\":{\"id\":\"9046b15b-683d-4360-bf02-50b293c523c2\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"9286220f-be21-4285-9f98-82e47983e885\",\"type\":\"Circle\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"ddbf0b00-3239-46e2-9058-c6a41d876e3d\",\"type\":\"Circle\"},\"selection_glyph\":null,\"view\":{\"id\":\"d9323336-6892-4f7a-9b21-219454da9a41\",\"type\":\"CDSView\"}},\"id\":\"2c80426f-48ee-4548-9b8e-4fe8cedc905e\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"922f16d5-22db-489c-b7bb-34696f02fb3e\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"overlay\":{\"id\":\"922f16d5-22db-489c-b7bb-34696f02fb3e\",\"type\":\"BoxAnnotation\"}},\"id\":\"f52a5d53-b883-4207-9b2f-fef0d340b336\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"a07f5972-a0c6-4fc8-8ee8-57da3bc27ce3\",\"type\":\"PanTool\"},{\"attributes\":{},\"id\":\"e2c63834-b69b-4da6-be3e-5a461700a899\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"bd651fa4-fa40-45c2-bee3-c954b80c8730\",\"type\":\"HelpTool\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"880cc9fc-34e8-4bf0-933d-1fe902873e7c\",\"type\":\"Title\"},{\"attributes\":{\"children\":[{\"id\":\"8ce60dd6-b191-47f3-b3a8-ac2764c0ff92\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"id\":\"8298b53a-f4f4-439f-88d4-93ba22579bbe\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"id\":\"ec52ace4-a416-4e4d-89e3-e166ef6b6a49\",\"subtype\":\"Figure\",\"type\":\"Plot\"}]},\"id\":\"ac9a3148-46a6-4dc8-a952-0f1dd53f3610\",\"type\":\"Row\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"ddbf0b00-3239-46e2-9058-c6a41d876e3d\",\"type\":\"Circle\"},{\"attributes\":{},\"id\":\"2e6c020f-e51f-47d7-b592-dfcc8af4d73c\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"plot\":{\"id\":\"ec52ace4-a416-4e4d-89e3-e166ef6b6a49\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"6cc5d941-1258-460d-99a0-50c4a1c25ce6\",\"type\":\"BasicTicker\"}},\"id\":\"c3215791-4f3e-45cf-911b-43b6046e64e4\",\"type\":\"Grid\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"navy\"},\"line_alpha\":{\"value\":0.5},\"line_color\":{\"value\":\"navy\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"9286220f-be21-4285-9f98-82e47983e885\",\"type\":\"Circle\"},{\"attributes\":{\"formatter\":{\"id\":\"a55c7fd2-a08d-4f13-b85b-64d10bf559b5\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"ec52ace4-a416-4e4d-89e3-e166ef6b6a49\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"0cbaae4f-7306-4953-9ba8-fcaa4e77abc7\",\"type\":\"BasicTicker\"}},\"id\":\"65926e89-c6d7-485c-acaf-02b052317623\",\"type\":\"LinearAxis\"},{\"attributes\":{\"below\":[{\"id\":\"c4360152-7c01-4ec2-8c8e-54b80ee70295\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"632cb763-c24a-4ed0-84f2-01eac3b932ad\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"c4360152-7c01-4ec2-8c8e-54b80ee70295\",\"type\":\"LinearAxis\"},{\"id\":\"d6f25cdc-7c79-404b-ac2c-e3a4456a470c\",\"type\":\"Grid\"},{\"id\":\"632cb763-c24a-4ed0-84f2-01eac3b932ad\",\"type\":\"LinearAxis\"},{\"id\":\"d66057b3-9bbe-487a-9e3a-7b56564c7ca8\",\"type\":\"Grid\"},{\"id\":\"b7ad60a8-1516-4098-82dc-2ec06039b207\",\"type\":\"BoxAnnotation\"},{\"id\":\"2c80426f-48ee-4548-9b8e-4fe8cedc905e\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"bd8f5c41-dda1-472f-b668-17c2486acbb5\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"eee5e99f-9df4-4cb6-8cbe-73e3d815cbf9\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"6dde6caa-1ca9-4970-9ac2-530eb03e5658\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"2a24ea98-030e-4cad-9fc4-34395111e91e\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"f69a45d2-6e84-414c-848d-f9704084d774\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"9efdb4a1-da3a-41d0-af81-aa6ef677ecb8\",\"type\":\"LinearScale\"}},\"id\":\"8ce60dd6-b191-47f3-b3a8-ac2764c0ff92\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0,1,2,3,4,5,6,7,8,9,10],\"y\":[0,1,2,3,4,5,6,7,8,9,10]}},\"id\":\"9046b15b-683d-4360-bf02-50b293c523c2\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"e4f8b296-09dc-44cd-b0cb-0397204dc9ad\",\"type\":\"PanTool\"},{\"id\":\"547b5670-c57c-4c08-ae81-e48e58a03a6d\",\"type\":\"WheelZoomTool\"},{\"id\":\"585d2a59-729d-4128-80fe-dbf96aae07e9\",\"type\":\"BoxZoomTool\"},{\"id\":\"28a4a4b9-8695-4d18-ba1a-977433f7df15\",\"type\":\"SaveTool\"},{\"id\":\"45c3fd81-4d0c-48dc-9bb8-b77bf7b7e0ad\",\"type\":\"ResetTool\"},{\"id\":\"219900c1-398b-4864-8505-49966e579729\",\"type\":\"HelpTool\"}]},\"id\":\"eee5e99f-9df4-4cb6-8cbe-73e3d815cbf9\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"97900385-612a-4fbb-9183-a054e8373ac3\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"callback\":null},\"id\":\"6dde6caa-1ca9-4970-9ac2-530eb03e5658\",\"type\":\"DataRange1d\"},{\"attributes\":{\"callback\":null},\"id\":\"f69a45d2-6e84-414c-848d-f9704084d774\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"2a24ea98-030e-4cad-9fc4-34395111e91e\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"9efdb4a1-da3a-41d0-af81-aa6ef677ecb8\",\"type\":\"LinearScale\"},{\"attributes\":{\"formatter\":{\"id\":\"2e6c020f-e51f-47d7-b592-dfcc8af4d73c\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"ec52ace4-a416-4e4d-89e3-e166ef6b6a49\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"6cc5d941-1258-460d-99a0-50c4a1c25ce6\",\"type\":\"BasicTicker\"}},\"id\":\"f66bce54-c4d8-442f-bac7-f222a0c4f2f4\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"6cc5d941-1258-460d-99a0-50c4a1c25ce6\",\"type\":\"BasicTicker\"},{\"attributes\":{\"formatter\":{\"id\":\"a2e6d310-2b20-4915-813a-0d987dd3b6ed\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"8ce60dd6-b191-47f3-b3a8-ac2764c0ff92\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"009cf202-5a27-4539-951b-5a19a65acf13\",\"type\":\"BasicTicker\"}},\"id\":\"c4360152-7c01-4ec2-8c8e-54b80ee70295\",\"type\":\"LinearAxis\"},{\"attributes\":{\"source\":{\"id\":\"9046b15b-683d-4360-bf02-50b293c523c2\",\"type\":\"ColumnDataSource\"}},\"id\":\"d9323336-6892-4f7a-9b21-219454da9a41\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"009cf202-5a27-4539-951b-5a19a65acf13\",\"type\":\"BasicTicker\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"bd8f5c41-dda1-472f-b668-17c2486acbb5\",\"type\":\"Title\"},{\"attributes\":{\"plot\":{\"id\":\"8ce60dd6-b191-47f3-b3a8-ac2764c0ff92\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"009cf202-5a27-4539-951b-5a19a65acf13\",\"type\":\"BasicTicker\"}},\"id\":\"d6f25cdc-7c79-404b-ac2c-e3a4456a470c\",\"type\":\"Grid\"},{\"attributes\":{\"formatter\":{\"id\":\"e83c894d-7a1f-4da1-ba83-a16c39643790\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"8ce60dd6-b191-47f3-b3a8-ac2764c0ff92\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"075384da-bb81-4fae-bee6-904b2f9fea4c\",\"type\":\"BasicTicker\"}},\"id\":\"632cb763-c24a-4ed0-84f2-01eac3b932ad\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"075384da-bb81-4fae-bee6-904b2f9fea4c\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"0cbaae4f-7306-4953-9ba8-fcaa4e77abc7\",\"type\":\"BasicTicker\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"8ce60dd6-b191-47f3-b3a8-ac2764c0ff92\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"075384da-bb81-4fae-bee6-904b2f9fea4c\",\"type\":\"BasicTicker\"}},\"id\":\"d66057b3-9bbe-487a-9e3a-7b56564c7ca8\",\"type\":\"Grid\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"b7ad60a8-1516-4098-82dc-2ec06039b207\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"79f5b138-60d3-4d69-8dda-ba88a7bc7ef3\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"below\":[{\"id\":\"6eefee54-86f2-486b-9f7c-952064555a40\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"597595b0-714a-46c4-8ece-7e47e1d46e41\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"6eefee54-86f2-486b-9f7c-952064555a40\",\"type\":\"LinearAxis\"},{\"id\":\"d20b0081-3cc6-4544-a44a-7c88043b0c1b\",\"type\":\"Grid\"},{\"id\":\"597595b0-714a-46c4-8ece-7e47e1d46e41\",\"type\":\"LinearAxis\"},{\"id\":\"4ca5f2b4-2953-4c2e-804d-d1e7ec3fe11f\",\"type\":\"Grid\"},{\"id\":\"105f0f5a-2d1f-476e-9c83-a075f2945536\",\"type\":\"BoxAnnotation\"},{\"id\":\"b3804f2b-359d-44b1-8b5b-2aed161b7f1f\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"3fa3134e-c7b3-4194-b69a-ea8abac75818\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"bd158590-a2b5-413c-9075-e49c28797e9c\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"4b79a696-8531-4353-bb5b-b30ae7183ffc\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"2a7899d0-43a7-47e2-a314-14ef591d5a09\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"8250e421-cfd4-4f45-9052-86fd58a55eb7\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"03e8405b-7528-4b1d-ba9d-76dc18adbdde\",\"type\":\"LinearScale\"}},\"id\":\"8298b53a-f4f4-439f-88d4-93ba22579bbe\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{},\"id\":\"e4f8b296-09dc-44cd-b0cb-0397204dc9ad\",\"type\":\"PanTool\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"a07f5972-a0c6-4fc8-8ee8-57da3bc27ce3\",\"type\":\"PanTool\"},{\"id\":\"118ef445-e7eb-4edb-9f33-456a4ee0b0ab\",\"type\":\"WheelZoomTool\"},{\"id\":\"f52a5d53-b883-4207-9b2f-fef0d340b336\",\"type\":\"BoxZoomTool\"},{\"id\":\"bce29049-bf52-42ff-87a2-6da1cf80b563\",\"type\":\"SaveTool\"},{\"id\":\"e2c63834-b69b-4da6-be3e-5a461700a899\",\"type\":\"ResetTool\"},{\"id\":\"bd651fa4-fa40-45c2-bee3-c954b80c8730\",\"type\":\"HelpTool\"}]},\"id\":\"672fbd4e-3852-4744-8c14-2f33035a89d2\",\"type\":\"Toolbar\"},{\"attributes\":{\"callback\":null},\"id\":\"a415870c-0010-4005-8f10-55c99bb483bf\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"547b5670-c57c-4c08-ae81-e48e58a03a6d\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"overlay\":{\"id\":\"b7ad60a8-1516-4098-82dc-2ec06039b207\",\"type\":\"BoxAnnotation\"}},\"id\":\"585d2a59-729d-4128-80fe-dbf96aae07e9\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"0ba1e96e-b22a-4ef6-a2bd-4a8428ff9ad7\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"28a4a4b9-8695-4d18-ba1a-977433f7df15\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"45c3fd81-4d0c-48dc-9bb8-b77bf7b7e0ad\",\"type\":\"ResetTool\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0,1,2,3,4,5,6,7,8,9,10],\"y\":[5,4,3,2,1,0,1,2,3,4,5]}},\"id\":\"cd53ce5f-16f5-446d-abf7-dc1d06827878\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"219900c1-398b-4864-8505-49966e579729\",\"type\":\"HelpTool\"},{\"attributes\":{},\"id\":\"cec12e0d-30e8-477f-ae8d-85ffcb6e3207\",\"type\":\"BasicTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"6d3bcfc1-b226-4fb6-a5bd-2233fca7b2fe\",\"type\":\"Triangle\"},{\"attributes\":{},\"id\":\"a2e6d310-2b20-4915-813a-0d987dd3b6ed\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"b73ab85a-d3b1-4a11-babd-153265155449\",\"type\":\"Square\"},{\"attributes\":{},\"id\":\"e83c894d-7a1f-4da1-ba83-a16c39643790\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0,1,2,3,4,5,6,7,8,9,10],\"y\":[10,9,8,7,6,5,4,3,2,1,0]}},\"id\":\"bd748e67-9574-4f18-9d49-174f2bcc2692\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"2a7899d0-43a7-47e2-a314-14ef591d5a09\",\"type\":\"LinearScale\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"2346e99b-3c31-476c-bb63-22000e05f23d\",\"type\":\"PanTool\"},{\"id\":\"7c7bc5a4-41ed-4709-9473-5a9ad46982a1\",\"type\":\"WheelZoomTool\"},{\"id\":\"54ef8229-d274-437a-acd6-b39862f13424\",\"type\":\"BoxZoomTool\"},{\"id\":\"ea3a1149-66ec-4416-8e07-ccdcec2bc24f\",\"type\":\"SaveTool\"},{\"id\":\"1067bd9d-0b4e-401d-aab8-418d98aad28d\",\"type\":\"ResetTool\"},{\"id\":\"93099f93-de09-4192-a86e-498acfa4529d\",\"type\":\"HelpTool\"}]},\"id\":\"bd158590-a2b5-413c-9075-e49c28797e9c\",\"type\":\"Toolbar\"},{\"attributes\":{\"callback\":null},\"id\":\"4b79a696-8531-4353-bb5b-b30ae7183ffc\",\"type\":\"DataRange1d\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"ec52ace4-a416-4e4d-89e3-e166ef6b6a49\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"0cbaae4f-7306-4953-9ba8-fcaa4e77abc7\",\"type\":\"BasicTicker\"}},\"id\":\"b5faf82d-f925-47d6-b293-dea2dc05be7a\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"03e8405b-7528-4b1d-ba9d-76dc18adbdde\",\"type\":\"LinearScale\"},{\"attributes\":{\"source\":{\"id\":\"bd748e67-9574-4f18-9d49-174f2bcc2692\",\"type\":\"ColumnDataSource\"}},\"id\":\"dc541811-6a1f-4e35-a622-acbebe51a92b\",\"type\":\"CDSView\"},{\"attributes\":{\"data_source\":{\"id\":\"bd748e67-9574-4f18-9d49-174f2bcc2692\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"c7faa80e-5d18-489f-be5d-990d6ae6946a\",\"type\":\"Triangle\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"6d3bcfc1-b226-4fb6-a5bd-2233fca7b2fe\",\"type\":\"Triangle\"},\"selection_glyph\":null,\"view\":{\"id\":\"dc541811-6a1f-4e35-a622-acbebe51a92b\",\"type\":\"CDSView\"}},\"id\":\"b3804f2b-359d-44b1-8b5b-2aed161b7f1f\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"callback\":null},\"id\":\"fb62478a-7166-4ab2-9e57-31c82f6a206e\",\"type\":\"DataRange1d\"},{\"attributes\":{\"callback\":null},\"id\":\"8250e421-cfd4-4f45-9052-86fd58a55eb7\",\"type\":\"DataRange1d\"},{\"attributes\":{\"plot\":{\"id\":\"8298b53a-f4f4-439f-88d4-93ba22579bbe\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"0c9a1740-db27-4e30-9b77-0180d4eb14a9\",\"type\":\"BasicTicker\"}},\"id\":\"d20b0081-3cc6-4544-a44a-7c88043b0c1b\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"4b76475e-a7ac-465c-8a01-5159e5d52b95\",\"type\":\"LinearScale\"},{\"attributes\":{\"formatter\":{\"id\":\"79f5b138-60d3-4d69-8dda-ba88a7bc7ef3\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"8298b53a-f4f4-439f-88d4-93ba22579bbe\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"0c9a1740-db27-4e30-9b77-0180d4eb14a9\",\"type\":\"BasicTicker\"}},\"id\":\"6eefee54-86f2-486b-9f7c-952064555a40\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"0c9a1740-db27-4e30-9b77-0180d4eb14a9\",\"type\":\"BasicTicker\"},{\"attributes\":{\"formatter\":{\"id\":\"97900385-612a-4fbb-9183-a054e8373ac3\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"8298b53a-f4f4-439f-88d4-93ba22579bbe\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"cec12e0d-30e8-477f-ae8d-85ffcb6e3207\",\"type\":\"BasicTicker\"}},\"id\":\"597595b0-714a-46c4-8ece-7e47e1d46e41\",\"type\":\"LinearAxis\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"8298b53a-f4f4-439f-88d4-93ba22579bbe\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"cec12e0d-30e8-477f-ae8d-85ffcb6e3207\",\"type\":\"BasicTicker\"}},\"id\":\"4ca5f2b4-2953-4c2e-804d-d1e7ec3fe11f\",\"type\":\"Grid\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"firebrick\"},\"line_alpha\":{\"value\":0.5},\"line_color\":{\"value\":\"firebrick\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"c7faa80e-5d18-489f-be5d-990d6ae6946a\",\"type\":\"Triangle\"},{\"attributes\":{\"below\":[{\"id\":\"f66bce54-c4d8-442f-bac7-f222a0c4f2f4\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"65926e89-c6d7-485c-acaf-02b052317623\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"f66bce54-c4d8-442f-bac7-f222a0c4f2f4\",\"type\":\"LinearAxis\"},{\"id\":\"c3215791-4f3e-45cf-911b-43b6046e64e4\",\"type\":\"Grid\"},{\"id\":\"65926e89-c6d7-485c-acaf-02b052317623\",\"type\":\"LinearAxis\"},{\"id\":\"b5faf82d-f925-47d6-b293-dea2dc05be7a\",\"type\":\"Grid\"},{\"id\":\"922f16d5-22db-489c-b7bb-34696f02fb3e\",\"type\":\"BoxAnnotation\"},{\"id\":\"55205201-f415-46f9-bf60-6bee6c91d2f4\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"880cc9fc-34e8-4bf0-933d-1fe902873e7c\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"672fbd4e-3852-4744-8c14-2f33035a89d2\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"a415870c-0010-4005-8f10-55c99bb483bf\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"4b76475e-a7ac-465c-8a01-5159e5d52b95\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"fb62478a-7166-4ab2-9e57-31c82f6a206e\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"0ba1e96e-b22a-4ef6-a2bd-4a8428ff9ad7\",\"type\":\"LinearScale\"}},\"id\":\"ec52ace4-a416-4e4d-89e3-e166ef6b6a49\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"3fa3134e-c7b3-4194-b69a-ea8abac75818\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"2346e99b-3c31-476c-bb63-22000e05f23d\",\"type\":\"PanTool\"},{\"attributes\":{},\"id\":\"93099f93-de09-4192-a86e-498acfa4529d\",\"type\":\"HelpTool\"},{\"attributes\":{},\"id\":\"7c7bc5a4-41ed-4709-9473-5a9ad46982a1\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"overlay\":{\"id\":\"105f0f5a-2d1f-476e-9c83-a075f2945536\",\"type\":\"BoxAnnotation\"}},\"id\":\"54ef8229-d274-437a-acd6-b39862f13424\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"ea3a1149-66ec-4416-8e07-ccdcec2bc24f\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"1067bd9d-0b4e-401d-aab8-418d98aad28d\",\"type\":\"ResetTool\"}],\"root_ids\":[\"ac9a3148-46a6-4dc8-a952-0f1dd53f3610\"]},\"title\":\"Bokeh Application\",\"version\":\"0.12.10\"}};\n",
       "    var render_items = [{\"docid\":\"52f4f30b-7129-478c-85b3-2c6f4422124c\",\"elementid\":\"db66ebcb-70f5-466c-b89a-e78d6e2b250c\",\"modelid\":\"ac9a3148-46a6-4dc8-a952-0f1dd53f3610\"}];\n",
       "\n",
       "    root.Bokeh.embed.embed_items(docs_json, render_items);\n",
       "  }\n",
       "\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        embed_document(root);\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "      attempts++;\n",
       "      if (attempts > 100) {\n",
       "        console.log(\"Bokeh: ERROR: Unable to embed document because BokehJS library is missing\")\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "ac9a3148-46a6-4dc8-a952-0f1dd53f3610"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.layouts import row\n",
    "\n",
    "# create a new plot\n",
    "s1 = figure(width=250, plot_height=250)\n",
    "s1.circle(x, y0, size=10, color=\"navy\", alpha=0.5)\n",
    "\n",
    "# create another one\n",
    "s2 = figure(width=250, height=250)\n",
    "s2.triangle(x, y1, size=10, color=\"firebrick\", alpha=0.5)\n",
    "\n",
    "# create and another\n",
    "s3 = figure(width=250, height=250)\n",
    "s3.square(x, y2, size=10, color=\"olive\", alpha=0.5)\n",
    "\n",
    "# show the results in a row\n",
    "show(row(s1, s2, s3))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "# EXERCISE: use column to arrange a few plots vertically\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# 网格图\n",
    "\n",
    "Bokeh还在 `bokeh.layouts` 模块中提供了一个 `gridplot` 布局，以便把图表排列成一个网格图，如下例所示。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div class=\"bk-root\">\n",
       "    <div class=\"bk-plotdiv\" id=\"4bc8b555-f555-4c7d-a647-6be310af40ad\"></div>\n",
       "</div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    var docs_json = {\"e47b33f0-afaa-4906-9d4f-681d19efb51e\":{\"roots\":{\"references\":[{\"attributes\":{},\"id\":\"265e76c2-701b-4540-9e77-3fd835f8783d\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"66a7333a-4b8f-4a7f-8304-84016d706f77\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"e0d8e697-0a99-40c1-a8fc-fa7fe539ebdb\",\"type\":\"Triangle\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"a02eb11a-c5d7-499c-8d4e-c5ceafa8fe6d\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"265e76c2-701b-4540-9e77-3fd835f8783d\",\"type\":\"BasicTicker\"}},\"id\":\"d96c85f8-b66a-4f2d-8727-64d2795a6bde\",\"type\":\"Grid\"},{\"attributes\":{\"source\":{\"id\":\"dfd7ddc3-f03d-47ae-b660-1c05b52bca85\",\"type\":\"ColumnDataSource\"}},\"id\":\"f9a40088-1b12-4db9-a06d-fd95925a6741\",\"type\":\"CDSView\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"d4fc26b1-bfcf-496b-b9ef-53d28dc7cca8\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"e0ab3da2-4e0f-4cbc-a42e-76fd9a15cf33\",\"type\":\"HelpTool\"},{\"attributes\":{},\"id\":\"1cc8621c-9430-4266-bd7e-0a6f9b4ffc6f\",\"type\":\"PanTool\"},{\"attributes\":{\"height\":250,\"width\":250},\"id\":\"56b29044-2887-4e93-aadd-8dce4de420b0\",\"type\":\"Spacer\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"firebrick\"},\"line_alpha\":{\"value\":0.5},\"line_color\":{\"value\":\"firebrick\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"896846ed-d13d-4925-a409-f39c4973e753\",\"type\":\"Triangle\"},{\"attributes\":{\"data_source\":{\"id\":\"6400444b-abef-465d-bfc5-92c72510ac3f\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"99b6abb8-e55f-4451-8461-6a96b6debfa1\",\"type\":\"Circle\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"379ffe0d-ca9d-4192-bdfe-1b9c59fce447\",\"type\":\"Circle\"},\"selection_glyph\":null,\"view\":{\"id\":\"41f1625a-cfcf-4b9d-9b81-1651729b3005\",\"type\":\"CDSView\"}},\"id\":\"4026ad49-dd74-4b38-8caf-9149b5602738\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"b752559f-0c77-471d-8434-4c7c6aaf084a\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"overlay\":{\"id\":\"d4fc26b1-bfcf-496b-b9ef-53d28dc7cca8\",\"type\":\"BoxAnnotation\"}},\"id\":\"a88e0702-ddc1-496a-8b95-5fdab2a0b4ad\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"0672800d-e267-43be-90cf-1dc352eb2f29\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"226ef6bb-9261-4491-8e8c-06218c07d90e\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"62e7fb4f-b296-42f9-b50c-782b8356c83d\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"5518f670-cfbd-46fa-b842-decc8e6eb230\",\"type\":\"HelpTool\"},{\"attributes\":{\"source\":{\"id\":\"6400444b-abef-465d-bfc5-92c72510ac3f\",\"type\":\"ColumnDataSource\"}},\"id\":\"41f1625a-cfcf-4b9d-9b81-1651729b3005\",\"type\":\"CDSView\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0,1,2,3,4,5,6,7,8,9,10],\"y\":[5,4,3,2,1,0,1,2,3,4,5]}},\"id\":\"495426c2-85ba-491a-8245-e1a4589343bd\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1cc8621c-9430-4266-bd7e-0a6f9b4ffc6f\",\"type\":\"PanTool\"},{\"id\":\"b752559f-0c77-471d-8434-4c7c6aaf084a\",\"type\":\"WheelZoomTool\"},{\"id\":\"a88e0702-ddc1-496a-8b95-5fdab2a0b4ad\",\"type\":\"BoxZoomTool\"},{\"id\":\"0672800d-e267-43be-90cf-1dc352eb2f29\",\"type\":\"SaveTool\"},{\"id\":\"226ef6bb-9261-4491-8e8c-06218c07d90e\",\"type\":\"ResetTool\"},{\"id\":\"5518f670-cfbd-46fa-b842-decc8e6eb230\",\"type\":\"HelpTool\"}]},\"id\":\"5527d9f1-1bd8-41ba-a146-ca854ce533dc\",\"type\":\"Toolbar\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"130bdf7a-9ebb-468b-b844-fd6c3265ed67\",\"type\":\"Title\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"573e2a1b-e457-4d03-a76b-0a03fddba904\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"7ca5b340-a562-4681-8bac-55e550304fc4\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"callback\":null},\"id\":\"9028e8d8-6aed-4fba-9ae7-fd91348da6f9\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1a154ec4-395c-483b-85ce-7d5d665d01c9\",\"type\":\"PanTool\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"d7ecb927-c635-4dff-8e80-ce1f76bfe3cf\",\"type\":\"Title\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"9d25e0bd-ffa9-4848-bad6-e37810a5b0c2\",\"type\":\"Square\"},{\"attributes\":{\"data_source\":{\"id\":\"dfd7ddc3-f03d-47ae-b660-1c05b52bca85\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"896846ed-d13d-4925-a409-f39c4973e753\",\"type\":\"Triangle\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"e0d8e697-0a99-40c1-a8fc-fa7fe539ebdb\",\"type\":\"Triangle\"},\"selection_glyph\":null,\"view\":{\"id\":\"f9a40088-1b12-4db9-a06d-fd95925a6741\",\"type\":\"CDSView\"}},\"id\":\"474ff1c6-2353-42da-8ea4-d652e939c38c\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"79d0bd1c-e0d1-4350-8fc4-3abbbda7c7b7\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"source\":{\"id\":\"495426c2-85ba-491a-8245-e1a4589343bd\",\"type\":\"ColumnDataSource\"}},\"id\":\"5dd5b902-62c6-42f0-89eb-b71ebec431f1\",\"type\":\"CDSView\"},{\"attributes\":{\"callback\":null},\"id\":\"915af136-dcbe-4de7-a36f-9ecbe7512016\",\"type\":\"DataRange1d\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"e6a34d5f-6f85-468a-9446-745edf0e3b50\",\"type\":\"PanTool\"},{\"id\":\"bf66b198-76da-4eca-9264-700951c359ef\",\"type\":\"WheelZoomTool\"},{\"id\":\"7a9be588-c4b9-4240-afb4-1bb961fb8105\",\"type\":\"BoxZoomTool\"},{\"id\":\"defc07c7-890d-40dc-8e68-90c3e055296f\",\"type\":\"SaveTool\"},{\"id\":\"9f803771-4fbb-4f1e-9c51-685adc5cf5e8\",\"type\":\"ResetTool\"},{\"id\":\"00b18815-894e-4c34-87f3-935556df060b\",\"type\":\"HelpTool\"}]},\"id\":\"af9e4ef4-2e5f-4bfb-b69d-1adabaf0801c\",\"type\":\"Toolbar\"},{\"attributes\":{\"callback\":null},\"id\":\"56d51047-220a-4428-bf26-2aa6d4625116\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"6b5d6109-ec06-42ec-99f4-00b0be8517d3\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"7e80c5d5-5dd5-4c3e-bd98-c1be03229e92\",\"type\":\"LinearScale\"},{\"attributes\":{\"callback\":null},\"id\":\"b40ae0de-a0e2-47cc-862a-a145b36a7051\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"fea848fb-c3ec-4bac-8688-396074865c45\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"plot\":{\"id\":\"a02eb11a-c5d7-499c-8d4e-c5ceafa8fe6d\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"76f3b0e8-dafb-4ae1-8faa-52809e86663a\",\"type\":\"BasicTicker\"}},\"id\":\"d08d0ea2-0897-4175-a81c-9502f6c1b73a\",\"type\":\"Grid\"},{\"attributes\":{\"plot\":{\"id\":\"d91c0de1-8065-4aad-94be-82107e1b35db\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"b3ac94a0-eb53-4edb-9c98-c00c71f3ec1d\",\"type\":\"BasicTicker\"}},\"id\":\"589d9844-6c7b-4095-86e0-c80c305fcdae\",\"type\":\"Grid\"},{\"attributes\":{\"formatter\":{\"id\":\"c17fd14f-4917-410d-96e6-3a13d9c06929\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"d91c0de1-8065-4aad-94be-82107e1b35db\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"b3ac94a0-eb53-4edb-9c98-c00c71f3ec1d\",\"type\":\"BasicTicker\"}},\"id\":\"1dbb5bb1-bccc-434a-bef5-19b0174c7cd4\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"fabedd33-1e59-40e5-bdaf-5e38efa5d91c\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"b3ac94a0-eb53-4edb-9c98-c00c71f3ec1d\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"6e28ca05-4874-47f9-aa93-8fa385fb7af1\",\"type\":\"LinearScale\"},{\"attributes\":{\"formatter\":{\"id\":\"9e5da232-c8ab-47b5-9a16-78ee813d8db8\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"d91c0de1-8065-4aad-94be-82107e1b35db\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"9854641c-df20-4af8-9c1f-cd44e4496f9b\",\"type\":\"BasicTicker\"}},\"id\":\"83873307-46fd-42ea-abcf-a51468ac1b05\",\"type\":\"LinearAxis\"},{\"attributes\":{\"overlay\":{\"id\":\"573e2a1b-e457-4d03-a76b-0a03fddba904\",\"type\":\"BoxAnnotation\"}},\"id\":\"b35f321d-f325-43bd-a912-d5625a5f9740\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"9854641c-df20-4af8-9c1f-cd44e4496f9b\",\"type\":\"BasicTicker\"},{\"attributes\":{\"formatter\":{\"id\":\"fea848fb-c3ec-4bac-8688-396074865c45\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"983e3d0d-369f-46de-bdcb-693f5780167b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"d4855616-da0a-4ec7-a145-f6eb9bad5cf0\",\"type\":\"BasicTicker\"}},\"id\":\"554bd1fa-e6c0-48f0-812c-82637664ee7b\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"f515107c-f6c7-444a-875e-423a86b8bdb8\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"76f3b0e8-dafb-4ae1-8faa-52809e86663a\",\"type\":\"BasicTicker\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"d91c0de1-8065-4aad-94be-82107e1b35db\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"9854641c-df20-4af8-9c1f-cd44e4496f9b\",\"type\":\"BasicTicker\"}},\"id\":\"915d65ce-b3e8-4d53-b238-d3e14832f7d8\",\"type\":\"Grid\"},{\"attributes\":{\"formatter\":{\"id\":\"66a7333a-4b8f-4a7f-8304-84016d706f77\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"a02eb11a-c5d7-499c-8d4e-c5ceafa8fe6d\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"265e76c2-701b-4540-9e77-3fd835f8783d\",\"type\":\"BasicTicker\"}},\"id\":\"df56c720-facd-48d1-8974-78d245ce7685\",\"type\":\"LinearAxis\"},{\"attributes\":{\"data_source\":{\"id\":\"495426c2-85ba-491a-8245-e1a4589343bd\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"541075a0-504e-47cf-89d4-bd793886fa7d\",\"type\":\"Square\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"9d25e0bd-ffa9-4848-bad6-e37810a5b0c2\",\"type\":\"Square\"},\"selection_glyph\":null,\"view\":{\"id\":\"5dd5b902-62c6-42f0-89eb-b71ebec431f1\",\"type\":\"CDSView\"}},\"id\":\"e4ba0d47-e14f-4261-a258-605508aa864a\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"olive\"},\"line_alpha\":{\"value\":0.5},\"line_color\":{\"value\":\"olive\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"541075a0-504e-47cf-89d4-bd793886fa7d\",\"type\":\"Square\"},{\"attributes\":{\"children\":[{\"id\":\"983e3d0d-369f-46de-bdcb-693f5780167b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"id\":\"a02eb11a-c5d7-499c-8d4e-c5ceafa8fe6d\",\"subtype\":\"Figure\",\"type\":\"Plot\"}]},\"id\":\"7644e4e2-8c9b-405a-91ac-08f049ce8a80\",\"type\":\"Row\"},{\"attributes\":{\"formatter\":{\"id\":\"7ca5b340-a562-4681-8bac-55e550304fc4\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"a02eb11a-c5d7-499c-8d4e-c5ceafa8fe6d\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"76f3b0e8-dafb-4ae1-8faa-52809e86663a\",\"type\":\"BasicTicker\"}},\"id\":\"443ccda3-ad02-4ee7-90ad-2cf4b6e7a832\",\"type\":\"LinearAxis\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"89a5ae32-0a19-46f4-a8be-dad9fc429cd2\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"e6a34d5f-6f85-468a-9446-745edf0e3b50\",\"type\":\"PanTool\"},{\"attributes\":{\"children\":[{\"id\":\"d91c0de1-8065-4aad-94be-82107e1b35db\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"id\":\"56b29044-2887-4e93-aadd-8dce4de420b0\",\"type\":\"Spacer\"}]},\"id\":\"047f9817-0b9d-451d-b064-753c7b6e5137\",\"type\":\"Row\"},{\"attributes\":{},\"id\":\"bf66b198-76da-4eca-9264-700951c359ef\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"overlay\":{\"id\":\"89a5ae32-0a19-46f4-a8be-dad9fc429cd2\",\"type\":\"BoxAnnotation\"}},\"id\":\"7a9be588-c4b9-4240-afb4-1bb961fb8105\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"defc07c7-890d-40dc-8e68-90c3e055296f\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"9f803771-4fbb-4f1e-9c51-685adc5cf5e8\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"00b18815-894e-4c34-87f3-935556df060b\",\"type\":\"HelpTool\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"ad94822d-f9fb-49bf-b48b-8aa329afc99c\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"9e5da232-c8ab-47b5-9a16-78ee813d8db8\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0,1,2,3,4,5,6,7,8,9,10],\"y\":[0,1,2,3,4,5,6,7,8,9,10]}},\"id\":\"6400444b-abef-465d-bfc5-92c72510ac3f\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"104fbc41-43d4-4d18-a3d7-46fb06b472a0\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"below\":[{\"id\":\"d6f0a6bb-febe-4478-83eb-0849b5a42525\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"554bd1fa-e6c0-48f0-812c-82637664ee7b\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"d6f0a6bb-febe-4478-83eb-0849b5a42525\",\"type\":\"LinearAxis\"},{\"id\":\"ac43b623-b836-4668-9bcc-e95b4092728d\",\"type\":\"Grid\"},{\"id\":\"554bd1fa-e6c0-48f0-812c-82637664ee7b\",\"type\":\"LinearAxis\"},{\"id\":\"2f6823ac-1df2-43f2-8645-ba43e056ba4b\",\"type\":\"Grid\"},{\"id\":\"573e2a1b-e457-4d03-a76b-0a03fddba904\",\"type\":\"BoxAnnotation\"},{\"id\":\"4026ad49-dd74-4b38-8caf-9149b5602738\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"d7ecb927-c635-4dff-8e80-ce1f76bfe3cf\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"8f7948af-0668-4728-bc79-e73299e31756\",\"type\":\"Toolbar\"},\"toolbar_location\":null,\"x_range\":{\"id\":\"9ea84024-d235-4a6e-919c-a9c8c4a90e7c\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"6ec80415-8944-4645-bc18-14f031aa6e44\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"13c13684-5723-429d-84c1-4d0249630224\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"d32e55ca-2919-4a61-ad40-a06733781879\",\"type\":\"LinearScale\"}},\"id\":\"983e3d0d-369f-46de-bdcb-693f5780167b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"379ffe0d-ca9d-4192-bdfe-1b9c59fce447\",\"type\":\"Circle\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"navy\"},\"line_alpha\":{\"value\":0.5},\"line_color\":{\"value\":\"navy\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"99b6abb8-e55f-4451-8461-6a96b6debfa1\",\"type\":\"Circle\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1a154ec4-395c-483b-85ce-7d5d665d01c9\",\"type\":\"PanTool\"},{\"id\":\"104fbc41-43d4-4d18-a3d7-46fb06b472a0\",\"type\":\"WheelZoomTool\"},{\"id\":\"b35f321d-f325-43bd-a912-d5625a5f9740\",\"type\":\"BoxZoomTool\"},{\"id\":\"f515107c-f6c7-444a-875e-423a86b8bdb8\",\"type\":\"SaveTool\"},{\"id\":\"fabedd33-1e59-40e5-bdaf-5e38efa5d91c\",\"type\":\"ResetTool\"},{\"id\":\"e0ab3da2-4e0f-4cbc-a42e-76fd9a15cf33\",\"type\":\"HelpTool\"}]},\"id\":\"8f7948af-0668-4728-bc79-e73299e31756\",\"type\":\"Toolbar\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0,1,2,3,4,5,6,7,8,9,10],\"y\":[10,9,8,7,6,5,4,3,2,1,0]}},\"id\":\"dfd7ddc3-f03d-47ae-b660-1c05b52bca85\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"callback\":null},\"id\":\"9ea84024-d235-4a6e-919c-a9c8c4a90e7c\",\"type\":\"DataRange1d\"},{\"attributes\":{\"below\":[{\"id\":\"443ccda3-ad02-4ee7-90ad-2cf4b6e7a832\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"df56c720-facd-48d1-8974-78d245ce7685\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"443ccda3-ad02-4ee7-90ad-2cf4b6e7a832\",\"type\":\"LinearAxis\"},{\"id\":\"d08d0ea2-0897-4175-a81c-9502f6c1b73a\",\"type\":\"Grid\"},{\"id\":\"df56c720-facd-48d1-8974-78d245ce7685\",\"type\":\"LinearAxis\"},{\"id\":\"d96c85f8-b66a-4f2d-8727-64d2795a6bde\",\"type\":\"Grid\"},{\"id\":\"d4fc26b1-bfcf-496b-b9ef-53d28dc7cca8\",\"type\":\"BoxAnnotation\"},{\"id\":\"474ff1c6-2353-42da-8ea4-d652e939c38c\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"130bdf7a-9ebb-468b-b844-fd6c3265ed67\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"5527d9f1-1bd8-41ba-a146-ca854ce533dc\",\"type\":\"Toolbar\"},\"toolbar_location\":null,\"x_range\":{\"id\":\"56d51047-220a-4428-bf26-2aa6d4625116\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"62e7fb4f-b296-42f9-b50c-782b8356c83d\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"915af136-dcbe-4de7-a36f-9ecbe7512016\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"6e28ca05-4874-47f9-aa93-8fa385fb7af1\",\"type\":\"LinearScale\"}},\"id\":\"a02eb11a-c5d7-499c-8d4e-c5ceafa8fe6d\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{},\"id\":\"d4855616-da0a-4ec7-a145-f6eb9bad5cf0\",\"type\":\"BasicTicker\"},{\"attributes\":{\"children\":[{\"id\":\"7644e4e2-8c9b-405a-91ac-08f049ce8a80\",\"type\":\"Row\"},{\"id\":\"047f9817-0b9d-451d-b064-753c7b6e5137\",\"type\":\"Row\"}]},\"id\":\"233d979c-8ac0-454a-8593-f2a04c1a42ed\",\"type\":\"Column\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"983e3d0d-369f-46de-bdcb-693f5780167b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"d4855616-da0a-4ec7-a145-f6eb9bad5cf0\",\"type\":\"BasicTicker\"}},\"id\":\"2f6823ac-1df2-43f2-8645-ba43e056ba4b\",\"type\":\"Grid\"},{\"attributes\":{\"callback\":null},\"id\":\"13c13684-5723-429d-84c1-4d0249630224\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"d32e55ca-2919-4a61-ad40-a06733781879\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"6ec80415-8944-4645-bc18-14f031aa6e44\",\"type\":\"LinearScale\"},{\"attributes\":{\"below\":[{\"id\":\"1dbb5bb1-bccc-434a-bef5-19b0174c7cd4\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"83873307-46fd-42ea-abcf-a51468ac1b05\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"1dbb5bb1-bccc-434a-bef5-19b0174c7cd4\",\"type\":\"LinearAxis\"},{\"id\":\"589d9844-6c7b-4095-86e0-c80c305fcdae\",\"type\":\"Grid\"},{\"id\":\"83873307-46fd-42ea-abcf-a51468ac1b05\",\"type\":\"LinearAxis\"},{\"id\":\"915d65ce-b3e8-4d53-b238-d3e14832f7d8\",\"type\":\"Grid\"},{\"id\":\"89a5ae32-0a19-46f4-a8be-dad9fc429cd2\",\"type\":\"BoxAnnotation\"},{\"id\":\"e4ba0d47-e14f-4261-a258-605508aa864a\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"ad94822d-f9fb-49bf-b48b-8aa329afc99c\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"af9e4ef4-2e5f-4bfb-b69d-1adabaf0801c\",\"type\":\"Toolbar\"},\"toolbar_location\":null,\"x_range\":{\"id\":\"9028e8d8-6aed-4fba-9ae7-fd91348da6f9\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"6b5d6109-ec06-42ec-99f4-00b0be8517d3\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"b40ae0de-a0e2-47cc-862a-a145b36a7051\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"7e80c5d5-5dd5-4c3e-bd98-c1be03229e92\",\"type\":\"LinearScale\"}},\"id\":\"d91c0de1-8065-4aad-94be-82107e1b35db\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{},\"id\":\"c17fd14f-4917-410d-96e6-3a13d9c06929\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"formatter\":{\"id\":\"79d0bd1c-e0d1-4350-8fc4-3abbbda7c7b7\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"983e3d0d-369f-46de-bdcb-693f5780167b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"35bd0788-7de2-4ec9-a5e0-9b337084ae37\",\"type\":\"BasicTicker\"}},\"id\":\"d6f0a6bb-febe-4478-83eb-0849b5a42525\",\"type\":\"LinearAxis\"},{\"attributes\":{\"plot\":{\"id\":\"983e3d0d-369f-46de-bdcb-693f5780167b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"35bd0788-7de2-4ec9-a5e0-9b337084ae37\",\"type\":\"BasicTicker\"}},\"id\":\"ac43b623-b836-4668-9bcc-e95b4092728d\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"35bd0788-7de2-4ec9-a5e0-9b337084ae37\",\"type\":\"BasicTicker\"}],\"root_ids\":[\"233d979c-8ac0-454a-8593-f2a04c1a42ed\"]},\"title\":\"Bokeh Application\",\"version\":\"0.12.10\"}};\n",
       "    var render_items = [{\"docid\":\"e47b33f0-afaa-4906-9d4f-681d19efb51e\",\"elementid\":\"4bc8b555-f555-4c7d-a647-6be310af40ad\",\"modelid\":\"233d979c-8ac0-454a-8593-f2a04c1a42ed\"}];\n",
       "\n",
       "    root.Bokeh.embed.embed_items(docs_json, render_items);\n",
       "  }\n",
       "\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        embed_document(root);\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "      attempts++;\n",
       "      if (attempts > 100) {\n",
       "        console.log(\"Bokeh: ERROR: Unable to embed document because BokehJS library is missing\")\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "233d979c-8ac0-454a-8593-f2a04c1a42ed"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.layouts import gridplot\n",
    "\n",
    "# create a new plot\n",
    "s1 = figure(width=250, plot_height=250)\n",
    "s1.circle(x, y0, size=10, color=\"navy\", alpha=0.5)\n",
    "\n",
    "# create another one\n",
    "s2 = figure(width=250, height=250)\n",
    "s2.triangle(x, y1, size=10, color=\"firebrick\", alpha=0.5)\n",
    "\n",
    "# create and another\n",
    "s3 = figure(width=250, height=250)\n",
    "s3.square(x, y2, size=10, color=\"olive\", alpha=0.5)\n",
    "\n",
    "# put all the plots in a gridplot\n",
    "p = gridplot([[s1, s2], [s3, None]], toolbar_location=None)\n",
    "\n",
    "# show the results\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "# EXERCISE: create a gridplot of your own\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
